<script setup>
defineProps({
  imageUrl: {
    type: String,
    required: true
  },
  foodName: {
    type: String,
    required: true
  }
});
</script>

<template>
  <div class="bg-white rounded-xl shadow-sm overflow-hidden">
    <img 
      :src="imageUrl" 
      :alt="foodName"
      class="w-full h-48 object-cover"
    />
    <div class="p-4">
      <h3 class="text-lg font-semibold text-gray-800">{{ foodName }}</h3>
    </div>
  </div>
</template>